<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/l-style.css" rel="stylesheet">
    <style>
        .com-list-box{
            width: 725px;
        }
        .display{
            width: 100%;
        }
    </style>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/pop_status.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="header-fl fl">科技小桌板</div>
        <div class="header-fr fr">
            <img src="img/icon/default-avatar.png" width="28" height="28" class="default-avatar fl">
            <span class="admin-name fl">Sherry</span>
            <img src="img/icon/exit-icon.png" width="16" height="16" class="login-exit fr">
        </div>
    </div>

    <div class="super-admin">
        <img src="img/icon/s-admin.png" width="70" height="71">
        <span class="super-text">超级管理员</span>
    </div>

    <div class="sidebar">
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div>
                            <a class="sidebar-list" href="index.html" data-id="1">
                                <span class="sidebar-icon">
                                    <span class="side1"></span>
                                </span>
                                <span class="">首页</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                            <a class="sidebar-list" data-id="2" >
                                <span class="sidebar-icon">
                                    <span class="side2"></span>
                                </span>
                                <span class="">消息通知</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="son-sidebar">
                            <li>
                                <a class="sidebar-son-list" data-id="1" href="gg1.html">公告列表</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" data-id="2" href="px1.html">培训通知</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div>
                            <a class="sidebar-list" data-id="3"  href="ry1.html">
                                <span class="sidebar-icon">
                                    <span class="side3"></span>
                                </span>
                                <span class="">人员管理</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div>
                            <a class="sidebar-list" data-id="4" href="qy1.html">
                                <span class="sidebar-icon">
                                    <span class="side4"></span>
                                </span>
                                <span class="">企业信息管理</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div>
                            <a class="sidebar-list" data-id="5" href="sb1.html">
                                <span class="sidebar-icon">
                                    <span class="side5"></span>
                                </span>
                                <span class="">申报看板</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div>
                            <a class="sidebar-list" data-id="6" href="wj1.html">
                                <span class="sidebar-icon">
                                    <span class="side6"></span>
                                </span>
                                <span class="">文件管理</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">
                            <a class="sidebar-list" data-id="7">
                                <span class="sidebar-icon">
                                    <span class="side7"></span>
                                </span>
                                <span class="">账号管理</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div id="collapseSeven" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="son-sidebar">
                            <li>
                                <a class="sidebar-son-list" href="zh2.html" data-id="1">普通管理员账号管理</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" href="zh1.html" data-id="2">科技联络人审核</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div data-toggle="collapse" data-parent="#accordion" href="#collapseEight">
                            <a class="sidebar-list" data-id="8">
                                <span class="sidebar-icon">
                                    <span class="side8"></span>
                                </span>
                                <span class="">系统设置</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div id="collapseEight" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="son-sidebar">
                            <li>
                                <a class="sidebar-son-list" href="xt3.html" data-id="1">个人信息</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" href="xt7.html" data-id="2">修改密码</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" href="xt5.html" data-id="3">企业类别管理</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" href="xt6.html" data-id="4">企业属性管理</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" href="xt1.html" data-id="5">Banner图管理</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" href="xt8.html" data-id="6">注册协议管理</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-header">
        <div class="page-right-top">
            <div class="right-top">
                <span class="right-title">文件管理</span>
            </div>
            <div class="top-nav top-nav-active">编辑文件</div>
        </div>
        <div class="main-content">
            <div class="mes-content">

                <div class="main-mes-content">
                    <form id="comMesBtn">
                        <div class="com-list">

                            <div class="com-list-box">
                                <div class="com-left fl">文件标题</div>
                                <input type="text" name="title" class="is-change pop-com-input" maxlength="50" placeholder="请输入文件标题">
                                <span class="pop-com-num">50</span>
                            </div>

                            <div class="com-list-box">
                                <div class="com-left fl">标题关键词</div>
                                <input type="text" name="keyword_input" class="pop-com-key" placeholder="请输入文件标题关键词（逗号分开）">
                                <span class="pop-com-num" style="width: 110px;">最多5个关键词</span>
                            </div>

                            <div class="com-list-box">
                                <div class="com-left fl">文件概要</div>
                                <textarea name="outline" class="is-change pop-com-textarea" placeholder="请输入文件概要" maxlength="50" cols="30" rows="4"></textarea>
                                <span class="pop-com-num" style="bottom: 10px;top: inherit;">50</span>
                            </div>
                            <div class="display">
                                <div class="com-list-box fl">
                                    <div class="com-left fl">选择文件夹</div>
                                    <select class="com-select fl" name="zt">
                                        <option value="0">请选择文件夹</option>
                                        <option value="1">文件夹1</option>
                                        <option value="2">文件夹2</option>
                                        <option value="3">文件夹3</option>
                                    </select>

                                    <button class="lang-btn fl" type="button">新建文件夹</button>

                                    <div class="clearfix"></div>
                                </div>

                                <div class="clearfix"></div>
                            </div>

                            <div class="display">
                                <div class="com-list-box fl">
                                    <div class="com-left fl">附件</div>
                                    <label class="upload-btn fl" for="upload_file" style="margin: 0;">点击上传</label>

                                    <input type="file" id="upload_file">
                                    <div class="clearfix"></div>
                                </div>
                                <div class="clearfix"></div>
                            </div>

                            <div class="display">
                                <div class="com-list-box fl">
                                    <div class="com-left fl">查看权限</div>
                                    <div class="select-jurisdiction fl">
                                        <span class="radio-icon radio-icon-check fl"></span>
                                        <span class="file-text fl">公开文件</span>
                                    </div>

                                    <div class="select-jurisdiction fl">
                                        <span class="radio-icon fl"></span>
                                        <span class="file-text fl">私密文件</span>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </div>

                            <div class="display">
                                <div class="com-list-box fl">
                                    <div class="com-left fl">发送给</div>
                                    <div id="collect-mes" class="fl">

                                    </div>

                                    <span class="send-out fl"></span>

                                    <div class="clearfix"></div>
                                </div>
                                <div class="clearfix"></div>
                            </div>

                            <div class="clearfix"></div>
                            <div class="add-mem-box" style="margin-top: 40px;">
                                <div class="com-left fl"></div>
                                <div class="acc-opera-btn fl mem-btn p-first-btn">发布</div>
                                <div class="acc-opera-btn fl mem-cancel">取消</div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="pop-status opacity"></div>

    <!--新建文件夹信息-->
    <div class="pop-first pop-classify" style="display: none;">
        <div class="pop-title">添加文件夹
            <span class="close close-icon"></span>
        </div>
        <form id="classSubmit">
            <div style="padding: 30px;">
                <div class="com-left fl" style="width: 86px;">文件夹名称</div>
                <input type="text" class="com-select com-is-name" placeholder="请输入文件夹名称" style="width: 350px;padding: 0 15px;">

                <div class="add-mem-box" style="margin:30px 0;overflow: hidden;">
                    <div class="com-left fl"></div>
                    <div class="acc-opera-btn fl mem-btn classify-btn">保存</div>
                    <div class="acc-opera-btn fl mem-cancel">取消</div>
                </div>
            </div>
        </form>
    </div>

    <!--企业分类信息-->
    <div class="pop-second pop-classify" style="display: none;">
        <div class="pop-title">添加文件夹
            <span class="close close-icon"></span>
        </div>
        <div style="padding: 30px;">
            <div class="com-left fl" style="width: 86px;">姓名</div>
            <input type="text" class="com-select collect-name" placeholder="请输入收件人姓名" style="width: 350px;padding: 0 15px;">

            <div class="com-left fl" style="width: 86px;">手机号</div>
            <input type="text" class="com-select collect-phone" placeholder="请输入收件人手机号" style="width: 350px;padding: 0 15px;">

            <div class="add-mem-box" style="margin:30px 0;overflow: hidden;">
                <div class="com-left fl"></div>
                <div class="acc-opera-btn fl mem-btn phone-btn">保存</div>
                <div class="acc-opera-btn fl mem-cancel">取消</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {

        SidebarHighlighting('6');

        // 监听input值的变化
        $('.is-change').keyup(function() {
            var this_val_len = $(this).val().length;

            $(this).next('.pop-com-num').text(50 - this_val_len);

        });

        // 权限选择
        $('.radio-icon').on('click', function () {
            $('.radio-icon').removeClass('radio-icon-check');
            $(this).addClass('radio-icon-check');
        });

        // 点击新建文件夹
        $('.lang-btn').on('click', function() {
            ComMesOpen();
            $('.pop-first').show();
        });

        //新建文件夹  ->  点击保存
        $('.classify-btn').on('click', function () {
            var com_name = $('.com-is-name');

            if ($.trim(com_name.val()) == '') {
                popStatus(2, '请输入名称', 1, '', true);
                return;
            }

            popStatus(1, '新增成功', 1, '', true);

            com_name.val('');

            ComMesClose();
        });

        //点击取消
        $('.mem-cancel, .close-icon').on('click', function() {
            ComMesClose();
        });

        //  点击发送icon
        $('.send-out').on('click', function() {
            ComMesOpen();
            $('.pop-second').show();
        });

        // 点击保存
        $('.phone-btn').on('click', function() {
            var is_name = $('.collect-name');
            var is_phone = $('.collect-phone');

            if ($.trim(is_name.val()) == '' || $.trim(is_phone.val()) == '') {
                popStatus(2, '请填写完整', 1, '', true);
                return;
            }

            popStatus(1, '添加成功', 1, '', true);

            ComMesClose();

            var html = '<div class="phone-box fl">'+ is_name.val() +''+ is_phone.val() +'</div>';

            $('#collect-mes').prepend(html);

            is_name.val(''); is_phone.val('');

        });

        // 弹框显示函数
        function ComMesClose() {
            $('.pop-status').hide();
            $('.pop-second').hide();
            $('.pop-first').hide();
        }

        function ComMesOpen() {
            $('.pop-status').show();
        }

    })
</script>
</body>
</html>